<template>
    <!-- 学习资料上传管理 -->
    <div class="class-mg">
        <!-- 创建班级头部 -->
        <div class="up-material">
            <n-input-group >
                <n-input :disabled="showJoin" v-model:value="classCode" style="width: 50%;margin-left: 10px;" placeholder="输入班级码加入班级" />
                <n-button :disabled="showJoin" type="primary" @click="jionClass()" ghost>加入班级</n-button>
            </n-input-group>
        </div>
        <!-- 班级信息表 -->
        <div class="mg-class" v-if="showJoin">

            <h2>My Class:</h2>

            <div style="min-width: 400px; ; display: flex;flex-direction: column;justify-content: space-between;" class="class-info">

                <div class="class-info-top">
                    <span>我的班级：{{ studentClassInfo.className }}</span>
                </div>

                <div class="class-info-bottom">
                    <span>我的老师：</span>
                    <img style="width: 50px ;height: 50px; border-radius: 10px;" :src="studentClassInfo.profilePic">
                    {{ studentClassInfo.nickName }}
                </div>
                <span>联系邮箱:{{ studentClassInfo.email }}</span>
                <div style="text-align: right; margin-bottom: 10px;">
                    <el-button @click="quitClass()">退出当前班级</el-button>
                </div>
            </div>

        </div>
        <div v-else style="text-align: center;margin-top: 50px;">
            目前还未加入任何班级
        </div>

    </div>

</template>

<script setup>
import studentHttp from '@/api/studentHttp';
import { computed, onMounted, ref } from 'vue';
import useUserStore from '@/stores/useUserStore';
import { openInfo } from '@/utils/openInfo';
const userStore = useUserStore()

// 禁用状态
const showJoin = ref(false)

//班级代码输入框
const classCode = ref("")
onMounted(() => {
    getStudentClass()
})
const studentClassInfo = ref("")

//获取学生的班级信息
function getStudentClass() {
    console.log(userStore.userInfo.userId);
    studentHttp.getStudentClass(userStore.userInfo.userId).then((res) => {
        console.log(res);
        if (res.code == 200) {
            studentClassInfo.value = res.data
            //禁用加入班级按键
            showJoin.value = true
        }else{
            showJoin.value = false
        }
    })
}

//加入班级
function jionClass(){
if(classCode.value == ""){
    openInfo("请先输入班级代码")
}else{
    console.log(userStore.userInfo.usesId);
                          userStore.userInfo.userId
    studentHttp.joinClass(userStore.userInfo.userId,classCode.value).then((res)=>{
        if(res.code == 500){
            openInfo(res.msg)
        }else{
            openInfo(res.msg)
            classCode.value = ""
            getStudentClass()
        }    
    })
}
}

//退出班级
function quitClass(){
    studentHttp.quitClass(userStore.userInfo.userId,studentClassInfo.value.classId).then((res)=>{
        if(res.code ==200){
            openInfo(res.msg)
            console.log(res);
        //退出班级成功刷新班级数据
        getStudentClass()
        
        }
        
    })
}

</script>

<style scoped>
/* 最大的盒子 */
.class-mg {
    background-color: rgb(182, 174, 174, 0.1);
    display: flex;
    flex-direction: column;
    height: 900px;
    border-radius: 10px;
}

/* 创建班级和发送通知 */
.up-material {
    margin: 10px;
    height: 50px;
    background-color: rgb(182, 174, 174, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.up-material span {
    margin-left: 10px;

}

.mg-class {
    border-radius: 10px;
    padding: 20px;
    margin: 10px;
    background-color: rgb(137, 32, 32, 0.1);
}


/* 用户信息 */
.user-info {
    margin-top: 10px;
    padding: 10px;
    height: 200px;
    display: flex;
    border-radius: 10px;
    background-color: rgba(246, 243, 243, 0.3);

}

/*左信息 */
.user-info-left {

    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /**内容高度平均分 */
}


/* 右信息 */
.user-info-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
</style>